import 'package:flutter/material.dart';

class AnimatedBuilder3Study extends StatefulWidget {
  const AnimatedBuilder3Study({Key? key}) : super(key: key);

  @override
  _AnimatedBuilder3StudyState createState() => _AnimatedBuilder3StudyState();
}

class _AnimatedBuilder3StudyState extends State<AnimatedBuilder3Study>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late AnimationController _opacityController;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
    _opacityController = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    _opacityController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("自定义动画学习"),
        actions: [
          InkWell(
            child: Container(
                color: Colors.red,
                width: 50,
                alignment: Alignment.center,
                child: Text("开启")),
            onTap: () async {
              _controller.duration = Duration(seconds: 4);
              _controller.forward();
              await Future.delayed(Duration(seconds: 4));
              _opacityController.duration = Duration(milliseconds: 1750);
              _opacityController.repeat(reverse: true);
              await Future.delayed(Duration(seconds: 7));
              _opacityController.reset();
              _controller.duration = Duration(seconds: 8);
              _controller.reverse();
            },
          )
        ],
      ),
      body: Center(
        child: FadeTransition(
          opacity: Tween(begin: 1.0, end: 0.5).animate(_opacityController),
          child: AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              return Container(
                  width: 300,
                  height: 300,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.blue,
                      gradient: RadialGradient(
                        colors: [
                          Colors.blue[500]!,
                          Colors.blue[100]!,
                        ],
                        //渐变开始的位置和结束的位置
                        stops: [_controller.value, _controller.value + 0.1],
                      )));
            },
          ),
        ),
      ),
    );
  }
}
